<template>
  <div class="contents">
    <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 141px);" v-if="contents && contents.length" >
      CONTENTS
      <div v-for="(item, index) in contents" class="contentItem" :style="{ 'color': index === activeIndex ? '#1890ff' : '' }" :key="item.href" @click="contentClick(item.href, index)" >
        {{ item.title }}
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      activeIndex: 0,
    }
  },
  computed: {
    ...mapGetters(['contents'])
  },
  methods: {
    contentClick(href, index) {
      this.activeIndex = index
      document.querySelector(href).scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
    }
  }
}
</script>

<style scoped>
  .contents{
    position: fixed;
    right: 0;
    top: 0;
    width: 250px;
    height: 100%;
    padding: 100px 40px 40px 40px;
    box-sizing: border-box;
  }
  .contentItem{
    cursor: pointer;
    padding-top: 10px;
    font-size: 13px;
  }
</style>